<template>
    <div class="wrap idols-list">
        <div class="wrap-header">
            <div class="right">
                <el-button size="mini" @click="dialogVisible=true">新建+</el-button>
            </div>

            <el-table
                :data="idolsList"
                class="mt8"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="姓名">
                </el-table-column>

                <el-table-column
                    prop="intro"
                    label="介绍">
                </el-table-column>
                <el-table-column
                    prop="work"
                    label="主要作品">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleFollow(scope.row)" size="small" v-if="!scope.row.userIdolStatus">关注
                        </el-button>
                        <el-button @click="handleFollow(scope.row)" size="small" v-else class="primary">已关注</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            title="新增偶像"
            :visible.sync="dialogVisible"
            width="40%">
            <el-form :model="idolForm" :rules="rules" ref="idolForm" width="160px" size="mini" label-width="80px"
                     label-position="right">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="idolForm.name"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                        class="avatar-uploader"
                        :action="uploadUrl"
                        name="multipartFile"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        accept="image/png,image/gif,image/jpg,image/jpeg">
                        <img v-if="idolForm.avatar" :src="baseURL+idolForm.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="简介" prop="intro">
                    <el-input v-model="idolForm.intro" type="textarea"
                              :rows="2"></el-input>
                </el-form-item>
                <el-form-item label="主要作品" prop="works">
                    <el-input v-model="idolForm.work" type="textarea"
                              :rows="2"></el-input>
                </el-form-item>
            </el-form>
            <div class="center">
                <el-button size="mini" @click="save">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {baseURL} from "../../utils/axios";

    export default {
        name: "list",
        data() {
            return {
                dialogVisible: false,
                idolForm: {
                    name: '',
                    avatar: '',
                    intro: '',
                    work: ''
                },
                baseURL: baseURL,
                uploadUrl: baseURL + '/api/common/uploadFile?type=idolImg',
                rules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur', whitespace: true},
                    ],
                    intro: [
                        {required: true, message: '请输入简介', trigger: 'blur', whitespace: true},
                    ],
                    work: [
                        {required: true, message: '请输入主要作品', trigger: 'blur', whitespace: true},
                    ],
                },
                idolsList: []
            }
        },
        methods: {
            getAllList() {
                this.$api.idol.idolList({
                    "pageNum": 1,
                    "pageSize": 100,
                    "userId": sessionStorage.getItem('id')
                }).then(res => {
                    this.idolsList = res.data.list;
                })
            },
            save() {
                this.$refs.idolForm.validate(valid => {
                    if (valid) {
                        this.$api.idol.idolAdd({
                            intro: this.idolForm.intro,
                            work: this.idolForm.work,
                            name: this.idolForm.name,
                            avatar: this.idolForm.avatar,
                        }).then(res => {
                            this.$message.success('新增成功');
                            this.getAllList();
                            this.dialogVisible = false;
                        })
                    }
                })
            },
            handleFollow(item) {
                this.$api.idol.idolFollow({
                    status: item.userIdolStatus ? 0 : 1,
                    idolId: item.idolId,
                    userId: sessionStorage.getItem('id')
                }).then(res => {
                    if (res.code === 200) {
                        this.$message.success('操作成功');
                        this.getAllList();
                    } else {
                    }

                })
            },
            handleAvatarSuccess(res, file) {
                this.idolForm.avatar = res.msg;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        },
        mounted() {
            this.getAllList();
        },

    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .idols-list {
        .primary {
            color: $text-color-primary;
        }
        .filter-item_3 .filter-item {
            margin-bottom: 8px;
        }
        .right {
            text-align: right;
        }
        .center {
            text-align: center;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: $text-color-primary;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    }

</style>
